<template>
  <div>
    <div class="banner">
      <h1>网站快速成型工具</h1>
      <p>
        Robert-ui，一套为开发者、设计师和产品经理准备的基于 Vue 2.0
        的ts版本的UI组件
      </p>
    </div>
    <div class="jumbotron" ref="indexMainImg">
      <img
        src="https://element.eleme.cn/static/theme-index-blue.c38b733.png"
        alt
      />
      <div
        class="jumbotron--red"
        :style="{
          height: mainImgOffset + 'px'
        }"
      >
        <img
          src="https://element.eleme.cn/static/theme-index-red.c8e136e.png"
          alt
        />
      </div>
    </div>
    <ul class="cards">
      <li class="card__item" v-for="(item, id) of cards" :key="id">
        <div class="card">
          <img :src="item.url" alt />
          <h3>{{ item.name }}</h3>
          <p>{{ item.explain }}</p>
          <router-link active-class="active" to="/zh-CN/guide/design" exact>{{
            item.show
          }}</router-link>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import throttle from 'throttle-debounce/throttle'
@Component
export default class App extends Vue {
  // 初始化数据
  cards = [
    {
      url: 'https://element.eleme.cn/static/guide.0a8462c.png',
      name: '指南',
      explain:
        '了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。',
      show: '查看详情',
      link: 'guide/design'
    },
    {
      url: 'https://element.eleme.cn/static/guide.0a8462c.png',
      name: '组件',
      explain:
        '使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。',
      show: '查看详情',
      link: 'component/layout'
    },
    {
      url: 'https://element.eleme.cn/static/guide.0a8462c.png',
      name: '主题',
      explain: '在线主题编辑器，可视化定制和管理站点主题、组件样式',
      show: '查看详情',
      link: 'theme'
    },
    {
      url: 'https://element.eleme.cn/static/guide.0a8462c.png',
      name: '资源',
      explain:
        '下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。',
      show: '查看详情',
      link: 'resource'
    }
  ]
  mainImgOffset = 0
  throttledHandleScroll
  created() {
    this.throttledHandleScroll = throttle(10, true, () => {
      this.handleScroll()
    })
  }
  handleScroll() {
    const ele: any = this.$refs.indexMainImg
    const rect = ele.getBoundingClientRect()
    const eleHeight = ele.clientHeight + 55
    let calHeight = (180 - rect.top) * 2
    if (calHeight < 0) {
      calHeight = 0
    }
    if (calHeight > eleHeight) {
      calHeight = eleHeight
    }
    this.mainImgOffset = calHeight
  }
  beforeDestroy() {
    window.removeEventListener('scroll', this.throttledHandleScroll)
  }
  mounted() {
    window.addEventListener('scroll', this.throttledHandleScroll)
  }
}
</script>

<style lang="scss">
.banner {
  text-align: center;
  padding-top: 20px;
  h1 {
    font-size: 34px;
    margin: 0;
    line-height: 48px;
    color: #555;
  }

  p {
    font-size: 18px;
    line-height: 28px;
    color: #888;
    margin: 10px 0 5px;
  }
}
.jumbotron {
  width: 890px;
  margin: 30px auto;
  position: relative;
  img {
    width: 100%;
  }
  .jumbotron--red {
    transition: height 0.1s;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }
}
.cards {
  margin: 0 auto 110px;
  width: 1140px;
  display: flex;
  .card__item {
    margin: 0 19px;
    box-sizing: border-box;
    list-style: none;
    width: 25%;
    height: 430px;
    background: #fff;
    border: 1px solid #eaeefb;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    transition: all 0.3s ease-in-out;
    bottom: 0;
    img {
      margin: 66px auto 60px;
      width: 160px;
      height: 120px;
      display: block;
    }
    h3 {
      margin: 0;
      font-size: 18px;
      color: #1f2f3d;
      font-weight: normal;
    }
    p {
      font-size: 14px;
      color: #99a9bf;
      padding: 0 25px;
      line-height: 20px;
    }
    a {
      height: 53px;
      line-height: 52px;
      font-size: 14px;
      color: #409eff;
      text-align: center;
      border: 0;
      border-top: 1px solid #eaeefb;
      padding: 0;
      cursor: pointer;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
      transition: all 0.3s;
      text-decoration: none;
      display: block;

      &:hover {
        color: #fff;
        background: #409eff;
      }
    }
    &:hover {
      bottom: 6px;
      box-shadow: 0 6px 18px 0 rgba(232, 237, 250, 0.5);
    }
  }
}
</style>
